<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>Title</title>
</head>


<style>
    .active {
        background-color: orange;
    }
</style>
<body>

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
    // 1.获取所有按钮元素
    var btns = document.querySelectorAll('button');

    // btns得到的伪数组, 里面的每一个元素 btns[i]

    for (let i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            // (1) 我们先把所有的按钮背景颜色去掉

            /**
             * 伪数组不能使用 forEach 循环吗 ?
             */
            // Uncaught TypeError: btns.forEach is not a function
            // at HTMLButtonElement.btns.<computed>.onclick
            // btns.forEach(btn => btn.className = '');

            /**
             * 这种循环不可以
             */
            // for (let btnsKey in btns) {
            //     btnsKey.className = '';
            // }

            /**
             * 这种循环可以
             */
            for (let btn of btns) {
                btn.className = '';
            }

            /**
             * 这种循环可以
             */
            // for (let j = 0; j < btns.length; j++) {
            //     btns[j].className = '';
            // }

            // (2) 再把
            this.className = 'active';
        }
    }

</script>
</body>
</html>
